<template>
	<view>
		<hx-navbar ref="hxnb" :config="config">
			<block slot="right">
				<view class="edit" @tap="editAvatar()">
					修改
				</view>
			</block>
		</hx-navbar>
		<view class="avatar">
			<view style="position: relative;">
				<image :src="Avatar" mode="scaleToFill" style="width: 750rpx;height:750rpx;border-radius: 8rpx;"
					@tap="images(Avatar)">
				</image>
			</view>
			<view class="alternative">
				<view @tap="chooseAvatar()" style="height: 112rpx;line-height: 112rpx;">
					从手机相册选择一张
				</view>
				<view class="cancel" @tap="datape()">
					取消
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import bgyxedit from '@/components/bgyxedit/bgyxedit.vue';
	import baseurl from '@/common/config.js'
	export default {
		data() {
			return {
				// 标题栏配置
				config: {
					title: "头像",
					back: true,
					color: "#111111",
					rightSlot: true,
					backgroundColor: [1, "#FFFFFF"],
				},
				Avatar: '',
			}
		},
		onLoad(e) {
			this.Avatar = JSON.parse(decodeURIComponent(e.data))
		},
		methods: {
			editAvatar() {
				let data = {
					image: this.Avatar
				}
				this.$api.deitInformation(data).then((res) => {
					if (res.statusCode == 200) {
						uni.navigateBack(1)
					}
				})
			},
			uploadFile(file, type, index) {
				uni.uploadFile({
					url: baseurl + '/universal/uploadCloudMore',
					filePath: file,
					name: 'file',
					header: {
						'Authorization': uni.getStorageSync('token'),
					},
					formData: {
						'type': type
					},
					success: (res) => {
						this.Avatar = 'http://' + JSON.parse(res.data).result
					}
				});
			},
			async chooseAvatar(index) {
				if (this.Avatar.length == 2) {
					uni.showLoading({
						title: '最多只能上传1张'
					})
					return uni.hideLoading();
				}
				let file = await this.$tools.chooseImg(3, 1, 1)
				if (file) {
					uni.showLoading({
						title: '正在上传头像...'
					})
					file.forEach((item) => {
						this.uploadFile(item.path, 2, index)
					})
					this.$forceUpdate();
					uni.hideLoading()
					// this.$forceUpdate();
				}
			},
			images(e) {
				let arr = [e]
				uni.previewImage({
					urls: arr
				});
			},
			datape() {
				uni.navigateBack(1)
			},
		}
	}
</script>

<style scoped>
	.edit {
		width: 162rpx;
		height: 70rpx;
		background: #492D22;
		border-radius: 10rpx;
		text-align: center;
		line-height: 70rpx;
		font-size: 32rpx;
		color: #ffffff;
		color: #ffffff;
		margin-right: 30rpx;
	}

	.avatar {
		background-color: #000000FF;
		padding: 130rpx 0;
	}

	.alternative {
		width: 690rpx;
		height: 354rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		text-align: center;
		font-size: 40rpx;
		margin: 130rpx auto 0;
		padding: 30rpx;
	}

	.cancel {
		width: 630rpx;
		height: 112rpx;
		background: #492D22;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		color: #ffffff;
		line-height: 112rpx;
		margin-top: 30rpx;
	}
</style>
